<template>
  <div class="water">
    <Card :bordered="false">
      <p slot="title"
         class="white">部门协同 > <span class="select-font">水质数据(市河长办)</span>
      </p>
      <div>
        <!-- <Button type="primary" @click.native="addWater">新增水质</Button> -->
        <Button type="info"
                @click.native="uploadMu"
                class="mr20">下载excel模板</Button>
        <Button type="primary"
                @click.native="addReady"
                class="mr20">导入excel</Button>
        <Button type="error"
                @click.native="del1"
                class="mr20">删除水质</Button>
        <Form :model="formItem"
              class="smallForm">
          <DatePicker @on-change="change"
                      format="yyyy-MM"
                      type="month"
                      placeholder="请选择月份"
                      style="width: 200px"
                      class="mr20"></DatePicker>
          <Input v-model="formItem.name"
                 style="width:200px;"
                 :maxlength="20"
                 class="mr20"
                 placeholder="请输入河名"></Input>
        </Form>
        <!-- <Cascader :data="areaArr"
                  class="smallArr mr20"
                  placeholder="请选择地区"
                  @on-change="showAddress"
                  v-model="area"></Cascader> -->
        <area-select @getData="getAreaData"
                       :multipleType="false" 
                       class="smallArr mr20"></area-select>
        <Button type="info"
                class="mr20"
                @click="submitSearch('1')">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table :data="waterData"
             @on-selection-change="showSelect"
             :columns="waterColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
      <del-modal title="水质"
                 ref="delModal"
                 @del="del"
                 :delArr="selectData"
                 :url="waterdel"></del-modal>
      <Modal v-model="daoruModal"
             @on-ok="addExcel"
             title="导入excel"
             width="1000"
             :mask-closable="false">
        <Upload multiple
                type="drag"
                :format="['xls']"
                :max-size="20480"
                :on-exceeded-size="handleMaxSize"
                :on-success="handleSuccess"
                :on-error="handleError"
                :on-format-error="handleFormatError"
                :action="daoruUrl">
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload"
                  size="52"
                  style="color: #3399ff"></Icon>
            <p>上传Excel</p>
          </div>
        </Upload>
        <Table v-if="readyData.length > 0"
               :data="readyData"
               :columns="waterColumns1"
               stripe></Table>
      </Modal>
    </div>
  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'components/public/delModal';
import { domain2, domain } from 'global/setting';
import areaSelect from 'public/areaSelect';
export default {
  data() {
    return {
      waterList: '/rld/waterqulity/list',
      waterdel: '/rld/waterqulity/del',
      waterAddMore: '/rld/waterqulity/batchAdd',
      urlAddressList: '/law/city/getTree',
      formItem: {
        name: '',
        month: '',
      },
      selectData: [],
      waterData: [],
      readyData: [],
      waterColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '河名',
          key: 'striv_name',
        },
        {
          title: '断面名称',
          key: 'section_name',
          align: 'center',
        },
        {
          title: '数据时间',
          key: 'collect_time',
        },
        {
          title: '所属区',
          render: (h, params) => {
            return h('div', {}, params.row.location.area);
          },
        },
        {
          title: '所属镇',
          render: (h, params) => {
            return h('div', {}, params.row.location.town);
          },
        },
        // {
        //   title: '水温',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.temp_data)
        //   }
        // },
        // {
        //   title: 'ph值',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.ph_data)
        //   }
        // },
        {
          title: '溶解氧',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.row.data.do_data)
          }
        },
        {
          title: '氨氮',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.row.data.an_data)
          }
        },
        {
          title: '高锰酸盐指数',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h('div', {}, params.row.data.pi_data)
          }
        },
        {
          title: '总磷',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.row.data.tp_data)
          }
        },
        {
          title: '五日生化需氧量',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('div', {}, params.row.data.bod5_data)
          }
        },
        {
          title: '化学需氧量',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.row.data.cod_data)
          }
        },
        {
          title: '实测值',
          key: 'qulity_level',
          align: 'center',
        },
        {
          title: '目标值',
          key: 'target_level',
          align: 'center',
        },
        {
          title: '是否达标',
          key: 'is_standard',
          align: 'center',
        },
      ],
      waterColumns1: [
        {
          title: '河名',
          key: 'striv_name',
        },
        {
          title: '断面名称',
          key: 'section_name',
          align: 'center',
        },
        {
          title: '数据时间',
          key: 'collect_time',
        },
        // {
        //   title: '水温',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.temp_data);
        //   },
        // },
        // {
        //   title: 'ph值',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.ph_data);
        //   },
        // },
        // {
        //   title: '溶解氧',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.do_data);
        //   },
        // },
        // {
        //   title: '氨氮',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.an_data);
        //   },
        // },
        // {
        //   title: '高锰酸盐指数',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.pi_data);
        //   },
        // },
        // {
        //   title: '总磷',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.tp_data);
        //   },
        // },
        // {
        //   title: '五日生化需氧量',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.bod5_data);
        //   },
        // },
        // {
        //   title: '化学需氧量',
        //   render: (h, params) => {
        //     return h('div', {}, params.row.data.cod_data);
        //   },
        // },
        {
          title: '实测值',
          key: 'qulity_level',
          align: 'center',
        },
        {
          title: '目标值',
          key: 'target_level',
          align: 'center',
        },
        {
          title: '是否达标',
          key: 'is_standard',
          align: 'center',
        },
      ],
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      modal2: false,
      daoruModal: false,
      actionPage: '1',
      daoruUrl: '',
      area: '',
      areaArr: [],
      addressData: [],
      currArea: {} // 当前地区
    };
  },
  methods: {
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: `文件太大，不能超过 20M。`,
      });
    },
    submitSearch(page) {
      let myBasis = storage.session.get('isWork') ? 5 :2;
      let params = {
        data: {
          pageSize: this.Page.pageSize,
          page: 1,
          searchValue: {},
          order: { collect_time: -1 },
          basis: myBasis
        },
        url: this.waterList,
        token: storage.session.get('token'),
        success: res => {
          console.log(res);
          this.waterData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (typeof page === 'string' || typeof page === 'number') {
        params.data.page = parseInt(page);
      }
      if (this.formItem.month !== '') {
        params.data.searchValue.collect_time = `${this.formItem.month}|#|like`;
      }
      if (this.formItem.name !== '') {
        params.data.searchValue.striv_name = `${this.formItem.name}|#|like`;
      }
      // if (this.addressData.length != 0) {
      //   if (this.addressData[1] == this.addressData[0]) {
      //   } else if (this.addressData[1] == this.addressData[2]) {
      //     params.data.searchValue[
      //       'location.area'
      //     ] = `${this.addressData[1].substr(0, 2)}|#|like`;
      //   } else {
      //     params.data.searchValue[
      //       'location.area'
      //     ] = `${this.addressData[1].substr(0, 2)}|#|like`;
      //     params.data.searchValue[
      //       'location.town'
      //     ] = `${this.addressData[2].substr(0, 2)}|#|like`;
      //   }
      // }
      if(this.currArea){
        if(this.currArea.level === '2'){ // 区
          params.data.searchValue['location.area'] = `${this.currArea.name.substr(0, 2)}|#|like`;
        }else if(this.currArea.level === '3'){ // 镇
          params.data.searchValue['location.town'] = `${this.currArea.name.substr(0, 2)}|#|like`;
        }
      }
      ajaxPost(params);
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    del() {
      this.selectData = [];
      this.submitSearch(this.actionPage);
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择水质');
      }
    },
    changePage(page) {
      this.submitSearch(page);
      this.actionPage = page;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: `文件格式不正确，请上传 xls 格式的excel。`,
      });
    },
    handleSuccess(res) {
      this.$Loading.finish();
      this.readyData = res.result;
    },
    handleError() {
      this.$Message.warning({
        content: '导入失败，请检查格式',
      });
    },
    addReady() {
      this.readyData = [];
      this.daoruModal = true;
      $('.ivu-upload-list').html('');
    },
    addExcel() {
      let params = {
        data: {
          datas: this.readyData,
        },
        url: this.waterAddMore,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.daoruModal = false;
            this.$Message.success({
              content: '导入成功',
            });
            this.submitSearch(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    change(data) {
      this.formItem.month = data;
    },
    uploadMu() {
      window.open(`${domain2}/home/swproject/template/Waterquality.xls`);
    },
    getAddress() {
      let that = this;
      let params = {};
      params.data = {};
      params.token = storage.session.get('token');
      params.url = this.urlAddressList;
      params.success = function (res) {
        console.log(res.data.result);
        that.areaArr = res.data.result;
      };
      ajaxPost(params);
    },
    showAddress(data) {
      this.addressData = data; // 保存层级联动
    },
    getAreaData(data) {
      this.currArea = data;
    }
  },
  mounted() {
    this.daoruUrl = `${domain}/rld/waterqulity/readxml?token=${storage.session.get(
      'token'
    )}`;
    this.submitSearch();
    // this.getAddress();
  },
  components: {
    'del-modal': delModal,
    'area-select': areaSelect
  },
};
</script>
<!-- 水质数据 -->
<style lang="less">
.water {
  margin: 15px;

  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
  .mr20 {
    margin-right: 20px;
  }
}
</style>